<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Fine-SE | 企业工程计划预测及管理系统</title>

    {% load static %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" crossorigin="anonymous">
    <link href="{% static 'vendor/metisMenu/metisMenu.min.css' %}" rel="stylesheet">
    <link href="{% static 'dist/css/sb-admin-2.css' %}" rel="stylesheet">

    <style>
        html, body {
            height: 100%;
        }

        #wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #page-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 15px;
            min-height: 0;
        }

        /* 修改iframe相关样式 */
        .iframe-wrapper {
            padding: 0 5px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .iframe-container {
            flex: 1;
            min-height: 0;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: #f8f9fa;
            overflow: hidden;
        }

        .iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 调整行布局 */
        .row.iframe-row {
            flex: 1;
            min-height: 0;
            margin-left: 0;
            margin-right: 0;
        }

        /* 确保仪表板卡片行不伸缩 */
        .row.dashboard-row {
            flex: 0 0 auto;
        }

        /* 登录状态提示样式 */
        .login-status {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f9f9f9;
        }

        /* 新增：侧边栏导航项样式 */
        .vertical-nav-items {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 120px);
            justify-content: space-between;
            padding: 20px 0;
        }

        .vertical-nav-item {
            position: relative;
            padding: 15px 0;
            text-align: center;
        }

        .vertical-nav-item a {
            display: block;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s;
        }

        .vertical-nav-item:hover a {
        color: #4169e1 !important; /* 皇家蓝 */
    }
    .vertical-nav-item:hover i {
        color: #4169e1 !important;
    }

        .vertical-nav-item:not(:last-child)::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 20px;
            background-color: #e0e0e0;
        }

        .vertical-nav-item i {
            display: block;
            font-size: 24px;
            margin-bottom: 8px;
        }

    /* 添加在现有的样式部分 */
    .vertical-nav-item.active a {
        color: #1e90ff !important; /* 道奇蓝 */
    }
    .vertical-nav-item.active i {
        color: #1e90ff !important;
    }
        .vertical-nav-items {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 120px);
        justify-content: space-between;
        padding: 20px 0;
        position: relative; /* 为分隔线定位做准备 */
    }

    .vertical-nav-item {
        position: relative;
        padding: 15px 0;
        text-align: center;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* 替换原有的分隔线样式 */
    .vertical-nav-item.active:not(:last-child)::after {
        background: linear-gradient(to bottom,
            transparent 0%,
            #1e90ff 20%,  /* 道奇蓝 */
            #4169e1 50%,  /* 皇家蓝 */
            #1e90ff 80%,
            transparent 100%);
        box-shadow: 0 0 8px rgba(30, 144, 255, 0.6); /* 蓝色光晕 */
    }

    .vertical-nav-item:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background: linear-gradient(to bottom,
            transparent 0%,
            #4682b4 20%,  /* 钢蓝色 */
            #4682b4 80%,
            transparent 100%);
        opacity: 0.7;
        transition: all 0.3s ease;
    }
    /* 悬停效果 - 蓝色调 */
    .vertical-nav-item:hover:not(:last-child)::after {
        background: linear-gradient(to bottom,
            transparent 0%,
            #4169e1 20%,  /* 皇家蓝 */
            #1e90ff 50%,  /* 道奇蓝 */
            #4169e1 80%,
            transparent 100%);
        opacity: 0.9;
    }
    </style>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/fine-se">
                <strong>
                    <i style="font-size: 36px; margin-left: 30px;">
                        <font color="black">Fine</font>
                        <font color="black"> - </font>
                        <font color="#00B0F0">SE</font>
                    </i>
                </strong>
            </a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            {% if user.is_authenticated %}
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目1</strong>
                                    <span class="pull-right text-muted">已完成40%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目2</strong>
                                    <span class="pull-right text-muted">已完成20%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目3</strong>
                                    <span class="pull-right text-muted">已完成60%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>项目4</strong>
                                    <span class="pull-right text-muted">已完成80%</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                        <span class="sr-only">80% Complete (danger)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>查看所有项目</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-tasks -->
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> {{ user.username }} <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户信息</a></li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置</a></li>
                    <li class="divider"></li>
                    <li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a></li>
                </ul>
            </li>
            {% else %}
            <li><a href="/login"><i class="fa fa-sign-in fa-fw"></i> 登录</a></li>
            <li><a href="/register"><i class="fa fa-user-plus fa-fw"></i> 注册</a></li>
            {% endif %}
        </ul>
        <!-- /.navbar-top-links -->
        {% if not user.is_authenticated %}
        <div class="navbar-default sidebar" role="navigation" style="background-color: transparent !important;
    border-right: none;">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <!-- 修改 index.html 中的导航项部分 -->
                    <div class="vertical-nav-items">
                        <div class="vertical-nav-item">
                            <a href="#" onclick="scrollToContentSection('features')" data-section="features">
                                <i class="fa fa-star"></i> 核心功能
                            </a>
                        </div>
                        <div class="vertical-nav-item">
                            <a href="#" onclick="scrollToContentSection('comparison')" data-section="comparison">
                                <i class="fa fa-balance-scale"></i> 模型对比
                            </a>
                        </div>
                        <div class="vertical-nav-item">
                            <a href="#" onclick="scrollToContentSection('future')" data-section="future">
                                <i class="fas fa-binoculars"></i> 未来展望
                            </a>
                        </div>
                        <div class="vertical-nav-item">
                            <a href="#" onclick="scrollToContentSection('start')" data-section="start">
                                <i class="fa fa-rocket"></i> 立即开始
                            </a>
                        </div>
                    </div>

                </ul>
            </div>
        </div>
        {% endif %}
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper" style="background: none; border: none;">
        <div class="row iframe-row" id="iframe-container"
             style="background: none; border: none; padding: 0; margin: 0;">
            <div class="iframe-wrapper result-iframe-wrapper"
                 style="background: none; border: none; padding: 0; margin: 0;">
                <div class="iframe-container" style="background: none; border: none; padding: 0; margin: 0;">
                    <iframe src="/content" style="border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/metisMenu/metisMenu.min.js"></script>
<script src="/static/vendor/raphael/raphael.min.js"></script>
<script src="/static/vendor/morrisjs/morris.min.js"></script>
<script src="/static/data/morris-data.js"></script>
<script src="/static/dist/js/sb-admin-2.js"></script>

<!-- 新增的登录拦截提示 -->
<div class="modal fade" id="loginAlertModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><i class="fa fa-exclamation-triangle"></i> 提示</h4>
            </div>
            <div class="modal-body">
                <p>请您先登录以使用完整功能</p>
            </div>
            <div class="modal-footer">
                <a href="/login" class="btn btn-primary">立即登录</a>
                <a href="/register" class="btn btn-default">注册账号</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 滚动到content.html的指定位置
    function scrollToContentSection(sectionId) {
        const iframe = document.querySelector('#iframe-container iframe');
        if (iframe) {
            iframe.contentWindow.postMessage({
                type: 'scrollToSection',
                sectionId: sectionId
            }, '*');
        }
    }

    // 监听iframe加载完成
    document.querySelector('iframe').addEventListener('load', function() {
        // 确保iframe加载完成后可以通信
        console.log('iframe loaded');
    });

    // 拦截未登录用户的点击 (保持原有结构不变的选择器)
    $(document).on('click', 'a[href="/train"], a[href="/predict"]', function(e) {
        {% if not user.is_authenticated %}
            e.preventDefault();
            $('#loginAlertModal').modal('show');
        {% endif %}
    });

    // 暴露登录状态检查方法给子页面
    window.getLoginStatus = function() {
        return {% if user.is_authenticated %}true{% else %}false{% endif %};
    }

    // 暴露显示登录模态框的方法给子页面
    window.showLoginAlert = function() {
        $('#loginAlertModal').modal('show');
    }
window.addEventListener('message', function(event) {
    switch(event.data.type) {
        case 'sectionActive':
            // 先移除所有导航项的高亮
            document.querySelectorAll('.vertical-nav-item').forEach(item => {
                item.classList.remove('active');
            });

            // 高亮指定区块
            const navItem = document.querySelector(`.vertical-nav-item a[data-section="${event.data.sectionId}"]`);
            if (navItem) {
                navItem.closest('.vertical-nav-item').classList.add('active');
            }
            break;

        case 'sectionInactive':
            // 取消指定区块的高亮
            const inactiveItem = document.querySelector(`.vertical-nav-item a[data-section="${event.data.sectionId}"]`);
            if (inactiveItem) {
                inactiveItem.closest('.vertical-nav-item').classList.remove('active');
            }
            break;

        case 'clearAllActive':
            // 清除所有高亮
            document.querySelectorAll('.vertical-nav-item').forEach(item => {
                item.classList.remove('active');
            });
            break;
    }
});
</script>
</body>
</html>